<template>
    <div id="authid">
        <div class="wrapper">
            <!-- <ul class="form-box">
                <li class="form__item">
                    <span class="form__key">姓名</span>
                    <div class="form__value">
                        <input v-model='name' type="text" placeholder="请输入姓名">
                    </div>
                </li>
                <li class="form__item">
                    <span class="form__key">身份证号</span>
                    <div class="form__value">
                        <input v-model='idCard' type="text" placeholder="请输入身份证号">
                    </div>
                </li>
            </ul> -->
            <p class='title'>拍摄身份证照片</p>
            <div class="main">
                <div class="id-photo">
                    <div class="id-photo-item">
                        <div class="detail" v-if='cardFront'>
                            <div class="img"><img :src="cardFront.url | oss('?x-oss-process=image/resize,w_200')" @click='showImg(cardFront.url,"front")'></div>
                            <div class="info">
                                <p>{{cardFront.name}}</p>
                                <p>{{cardFront.idNumber}}</p>
                            </div>
                            <span class="re-upload">重拍</span>
                        </div>
                        <upload type='front' @done='uploadImg' :class='{uploaded:cardFront}'>
                            <span class='logo'><img src="../images/photo_idf@3x.png"> </span>
                            <p>+ 身份证正面</p>
                        </upload>
                        <loading mask v-show='loading_front' mode='full' :size='14'></loading>
                    </div>
                    <div class="id-photo-item">
                        <div class="detail" v-if='cardBack'>
                            <div class="img"><img :src="cardBack.url | oss('?x-oss-process=image/resize,w_200')" @click='showImg(cardBack.url,"back")'></div>
                            <div class="info">
                                <p>{{cardBack.qfjg}}</p>
                                <p>{{cardBack.qfrq}} - {{cardBack.sxrq}}</p>
                            </div>
                            <span class="re-upload">重拍</span>
                        </div>
                        <upload type='back' @done='uploadImg' :class='{uploaded:cardBack}'>
                            <span class='logo'><img src="../images/photo_idb@3x.png"> </span>
                            <p>+ 身份证反面</p>
                        </upload>
                        <loading mask v-show='loading_back' mode='full' :size='14'></loading>
                    </div>
                </div>
                <p class='title'>拍摄本人与身份证合影照片</p>
                <div class="id-photo center">
                    <div class="id-photo-item">
                        <div class="detail" v-if='cardGroup'>
                            <div class="img"><img :src="cardGroup.url | oss('?x-oss-process=image/resize,w_200')" @click='showImg(cardGroup.url,"group")'></div>
                            <span class="re-upload">重拍</span>
                        </div>
                        <upload type='group' @done='uploadImg' :class='{uploaded:cardGroup}'>
                            <span class='icon'><img src="../images/photo_idp@3x.png"> </span>
                            <p>+ 拍摄合影</p>
                        </upload>
                        <loading mask v-show='loading_group' mode='full' :size='14'></loading>
                    </div>
                </div>
                <p class='explain' @click='show_demand = true'>查看拍摄要求</p>

                <div class="button" @click='confirm'>提交</div>
                
            </div>

        </div>


        <modal 
            :show='show_demand'
            mode='bottom'
            class='modal-demand'
            closeButton
            @close='show_demand = false'>
            <p class="text" >拍摄要求</p>
            <div class="wrapper">
                <img width="100%" :src='demandImg'>
            </div>
        </modal>
        
        <image-view :url='currentMidImg' :show='modal_img_show' @close='modal_img_show = false' deleteButton @delete='deleteImg'></image-view>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import loading from '../components/Loading.vue'
    import pickerList from '../components/PickerList.vue'
    import upload from '../components/Upload.vue'
    import modal from '../components/Modal.vue'
    import imageView from '../components/ImageView.vue'
    import oss from '../filters/filter-oss'
    import  { mapGetters, mapActions }  from 'vuex'
    import { authIdValidation } from '../validation/validation'
    import { storageApi, authApi, reportApi } from '../api/api'
    import moment from 'moment'
    import { getBrowser } from '../utils/utils'

    export default {
        components:{
            loading,
            pickerList,
            upload,
            modal,
            imageView
        },
        filters:{
            oss
        },
        data() {
            return {
                inWechat:getBrowser() == 'WeChat',
                name:'',
                idCard:'',
                cardFront:'',
                cardBack:'',
                cardGroup:'',
                usageList:[],
                imgList:[],
                loadingList:[],
                uploadList:[],
                usage:-1,
                loading:true,
                loading_front:'',
                loading_back:'',
                loading_group:'',
                currentImg:'',
                show_demand:false,
                current:'',
                demandImg:require("../images/yaoqiu.jpg"),
                currentIndex:'',
                modal_img_show:false,
                intro:''
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo',
                'loanInForm'
            ]),
            userInfo(){
                return this.localInfo.userInfo || {}
            },
            configInfo(){
                return this.localInfo.configInfo || {}
            },
            introLength(){
                if(this.intro) return this.intro.length
                return 0
            },
            currentSmallImg(){
                return oss(this.currentImg,'?x-oss-process=image/resize,w_200')
            },
            currentMidImg(){
                return oss(this.currentImg,'?x-oss-process=image/resize,w_600')
            },
            authIdImgs(){
                if(this.localInfo) return this.localInfo.authIdImgs
                return {}
            },
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setLoanInUseForm',
                'setAuthIdImgs'
            ]),

            // function

            uploadImg(fileData,type){
                let typeStr
                if(type == 'front') {
                    this.loading_front = true
                    typeStr = 'idfront'
                }
                if(type == 'back') {
                    this.loading_back = true
                    typeStr = 'idback'
                }
                if(type == 'group') {
                    this.loading_group = true
                    typeStr = 'idcardGroup'
                }

                storageApi.uploadBase64({
                    base64:fileData,
                    type:typeStr
                })
                .then(result=>{
                    if(type == 'front') {
                        this.cardFront = result
                        this.setAuthIdImgs({
                            pos:'front',
                            result:result
                        })
                        this.loading_front = false
                        return
                    }
                    if(type == 'back') {
                        this.cardBack = result
                        this.setAuthIdImgs({
                            pos:'back',
                            result:result
                        })
                        this.loading_back = false
                        return
                    }
                    if(type == 'group') {
                        this.cardGroup = result
                        this.setAuthIdImgs({
                            pos:'group',
                            result:result
                        })
                        this.loading_group = false
                        return
                    }
                })
                .catch(error => {
                    console.error(error)
                    if(type == 'front') {
                        this.cardFront = ''
                        this.loading_front = false
                        return
                    }
                    if(type == 'back') {
                        this.cardBack = ''
                        this.loading_back = false
                        return
                    }
                    if(type == 'group') {
                        this.cardGroup = ''
                        this.loading_group = false
                        return
                    }
                })
            },
            showImg(img,type){
                this.modal_img_show = true
                this.current = type
                this.currentImg = img
            },
            deleteImg(){
                this.modal_img_show = false
                if(this.current == 'front'){
                    this.cardFront = ''
                    this.setAuthIdImgs({
                        pos:'front',
                        result:''
                    })
                    return
                }
                if(this.current == 'back'){
                    this.cardBack = ''
                    this.setAuthIdImgs({
                        pos:'back',
                        result:''
                    })
                    return
                }
                if(this.current == 'group'){
                    this.cardGroup = ''
                    this.setAuthIdImgs({
                        pos:'group',
                        result:''
                    })
                    return
                }
            },
            goRouter(code){
                let protocol = location.protocol
                let host = location.host
                let pathname = location.pathname
                let search = location.search
                let realUrl = `${protocol}//${host}${pathname}${search}#auth`
                let name = 'auth'

                if(code == 'personal') name = 'info-base'
                if(code == 'zhima') {
                    if(this.configInfo.zmAutoAuth){
                        this.$router.replace({
                            name:'auth-zmxy',
                        })
                        return
                    }
                    this.showLoading()
                    authApi.zhimaAuthUrl({
                        callBackUrl:realUrl
                    })
                    .then(result=>{
                        this.hideLoading()
                        location.href = result
                    })
                    .catch(error => {
                        console.error(error)
                        this.hideLoading()
                    })
                    return
                }
                if(code == 'mobile') {
                    this.showLoading()
                    reportApi.carrier51gjj({
                        returnUrl:realUrl
                    })
                    .then(result=>{
                        this.hideLoading()
                        location.href = result.url
                    })
                    .catch(error => {
                        console.error(error)
                        this.hideLoading()
                    })
                    return
                }
                if(code == 'bankcard') name = 'add-bankcard'
                this.$router.replace({
                    name:name,
                })
            },
            confirm(){
                let params = {
                    name:this.cardFront && this.cardFront.name,
                    idCard:this.cardFront && this.cardFront.idNumber,
                    cardFront:this.cardFront && this.cardFront.url,
                    cardBack:this.cardBack && this.cardBack.url,
                    cardGroup:this.cardGroup && this.cardGroup.url,
                }
                if(!authIdValidation(params)) return

                this.showLoading()
                authApi.identityInfoAuth(params)
                .then(result=>{
                    this.hideLoading()
                    this.setAuthIdImgs('remove')
                    this.setMsgTip({
                        text:'提交身份认证成功！',
                        type:'success'
                    })

                    this.goRouter(result.nextItem)
                })
                .catch(error=>{
                    console.error(error)
                    this.hideLoading()
                })

            },
        },
        created(){
            this.cardFront = this.authIdImgs.front
            this.cardBack = this.authIdImgs.back
            this.cardGroup = this.authIdImgs.group
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/animate";
    @import "../sass/mixins";
    #authid{
        .title{
            @extend %font-body1;
            padding-top: 16px;
            text-align: center;
            padding-bottom: 16px;
        }
        .main{
            padding: 0 24px;
        }
        .id-photo{
            &.center{
                justify-content: center;
                border-bottom: none;
                .id-photo-item{
                    .icon{
                        height:64px;
                        display: inline-block;
                        img{
                            height: 100%;
                        }
                    }
                    p{
                        padding-top: 0;
                    }
                }
            }
        }
        .id-photo-item{
            position: relative;
            overflow:hidden;
            width: 100%;
            background-color: #fff;
            text-align: center;
            height:108px;
            box-sizing:border-box;
            border-radius:2px;
            margin-bottom: 8px;
            .component-upload{
                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                &.uploaded{
                    position: absolute;
                    opacity:0;
                    width: 80px;
                    height: 40px;
                    right: 0;
                    bottom: 0;
                }
                p{
                    @extend %font-caption;
                    padding-top: 8px;
                }
            }
            .detail{
                width: 100%;
                height: 100%;
                box-sizing:border-box;
                display: flex;
                padding: 18px 16px;
                .info{
                    text-align: left;
                    padding-left: 16px;
                    @extend %font-body1;
                    color:$importColor;
                }
                .img{
                    width: 90px;
                    height: 67.5px;
                    position: relative;
                    overflow:hidden;
                    background: $sectionColor;
                    img{
                        position: absolute;
                        top:0;
                        left:0;
                        width:100%;
                    }
                }
                .re-upload{
                    position: absolute;
                    right:16px;
                    bottom: 16px;
                    padding-left: 20px;
                    background: url(../images/reshoot@3x.png) no-repeat center left;
                    background-size: 16px 16px;
                }
            }
            .logo{
                display: block;
                height: 26px;
                text-align: center;
                img{
                    height: 100%;
                }
            }
        }
        .explain{
            @extend %font-caption;
            padding:16px 24px 24px 24px;
            color:$blue;
            text-align: center;
        }
        .button{
            margin-top: 6px;
            margin-bottom: 30px;
        }
        .intro-length{
            @extend %font-caption;
            padding:8px 16px 0 16px;
            text-align: right;
            &.shake{
                color:$red;
            }
        }
        .save-use{
            padding:24px;
        }
        .modal-demand{
            .component-modal__main {
                overflow: hidden;
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                padding-top: 16px;
            }
            .text{
                @extend %font-title;
                color: rgba(0, 0, 0, 0.87);
                padding-bottom: 4px;
                text-align: center;
            }
            .component-modal__container{
                height:85%;
            }
            .wrapper{
                top:60px;
                padding-bottom: 70px;
            }
        }
        .modal-img{
            width: 100%;
            max-height:400px;
            overflow:auto;
            -webkit-overflow-scrolling: touch;
            img{
                width: 100%;
            }
        }
    }

</style>
